<template>
    <!-- 供应商评价--查看 -->
    <div class="e-form">
        <div class="tabs" v-if="Object.keys(basicFormData).length != 0">
            <el-tabs
                tab-position="left"
                v-model="tabsName"
                @tab-click="onChangeTab"
            >
                <!-- 基本信息 -->
                <el-tab-pane
                    label="基本信息"
                    name="baseInfo"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="评价明细"
                    name="evaluateDetail"
                    :disabled="clickTabFlag"
                ></el-tab-pane>

                <el-tab-pane
                    label="附件信息"
                    name="accessory"
                    :disabled="clickTabFlag"
                ></el-tab-pane>
                <el-tab-pane
                    label="审核历史"
                    name="auditHistory"
                    :disabled="clickTabFlag"
                ></el-tab-pane>

                <div>
                    <!-- 基本信息 -->
                    <div id="baseInfoCon" class="con">
                        <div class="e-form">
                            <div class="tabs">
                                <div class="tabs-title" id="baseInfo">
                                    基本信息
                                </div>
                                <div style="width: 100%" class="form">
                                    <el-form
                                        :model="basicFormData"
                                        label-width="150px"
                                        ref="basicFormData"
                                    >
                                        <BillTop
                                            title="供应商年度评价详情"
                                            @cancel="handleClose"
                                        ></BillTop>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="合同名称">
                                                    {{
                                                        basicFormData.contractName
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="合同类型">
                                                    {{
                                                        basicFormData.contractType
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="统一社会信用代码"
                                                >
                                                    {{
                                                        basicFormData.creditCode
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="供应商名称"
                                                >
                                                    {{
                                                        basicFormData.supplierName
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="供应商类型"
                                                >
                                                    {{
                                                        basicFormData.supplierTypeKey
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="供应商品/资质等级"
                                                >
                                                    {{
                                                        basicFormData.qualificationLevelName
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="历史信用等级"
                                                >
                                                    {{
                                                        basicFormData.historyEvaluate
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item
                                                    label="当前评价结论"
                                                >
                                                    {{
                                                        basicFormData.evaluationConclusion
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="评价机构">
                                                    {{
                                                        basicFormData.orgName
                                                    }}</el-form-item
                                                >
                                            </el-col>

                                            <el-col :span="12">
                                                <el-form-item
                                                    label="评价日期："
                                                >
                                                    {{ basicFormData.billDate }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="上级机构"
                                                    >{{
                                                        basicFormData.upOrgName
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="状态">
                                                    {{
                                                        statusLable(
                                                            basicFormData.state
                                                        )
                                                    }}</el-form-item
                                                >
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="终期评价"
                                                    >{{
                                                        basicFormData.superiorOrg
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="备注"
                                                    >{{
                                                        basicFormData.superiorOrg
                                                    }}
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                </div>
                            </div>
                        </div>

                        <!-- ------------------------------------------------------------------------------------- -->
                    </div>
                    <div id="rewardDetailsCon" class="con">
                        <div class="tabs-title" id="rewardDetails">
                            评价明细
                        </div>
                        <div class="e-table">
                            <el-table
                                :data="evaluationItems.creditRatingTemplateDtls"
                                border
                                ref="table"
                                style="width: 100%"
                                class="table"
                                :max-height="$store.state.tableHeight"
                                @cell-mouse-enter="cellMouseEnter"
                                @cell-mouse-leave="cellMouseLeave"
                                :cell-class-name="cellClsNm"
                                v-sortTable="{
                                    tableData:
                                        evaluationItems.creditRatingTemplateDtls,
                                    _this: this,
                                    ref: 'table'
                                }"
                                row-key="dtlId"
                                :tree-props="{
                                    children: 'children',
                                    hasChildren: 'hasChildren'
                                }"
                            >
                                >
                                <el-table-column
                                    key="selection2"
                                    prop="sortIndex"
                                    label="序号"
                                    width="80"
                                >
                                </el-table-column>
                                <el-table-column
                                    key="content"
                                    prop="content"
                                    label="检查内容"
                                    min-width="300"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="score"
                                    label="规定分值"
                                    width="120"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="checker"
                                    label="检查记录"
                                    min-width="300"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="scoreResult"
                                    label="实得分值"
                                    width="150"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                        <div>
                            <el-form
                                :model="evaluationItems"
                                label-width="150px"
                            >
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="评价得分：">
                                            {{ evaluationItems.evaluate }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="综合评价：">
                                            {{
                                                evaluationItems.complexEvaluate ==
                                                '4'
                                                    ? 'D'
                                                    : evaluationItems.complexEvaluate
                                            }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>

                    <!-- 附件信息 -->
                    <div id="WarehouseCon" class="con">
                        <div class="tabs-title" id="accessory">附件信息</div>
                        <div class="e-table">
                            <AttachComp
                                :bucketName="bucketName"
                                :relationId="billid"
                            ></AttachComp>
                        </div>
                    </div>
                    <!-- 审核历史 -->
                    <div id="auditHistoryCon" class="con">
                        <div class="tabs-title" id="auditHistory">审核历史</div>
                        <ComExaHistory
                            :billType="6110"
                            @getAuditHistory="getAuditHistory"
                            :tableData="tableData"
                            ref="ComExaHistory"
                        />
                    </div>
                </div>
            </el-tabs>
        </div>
        <div class="buttons">
            <ComExaButtons :auditState="auditState" @exas="exas" />
            <el-button @click="handleClose" size="small">取消</el-button>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import subcontractorRAP from '@/api/OutsourcingartyAdmin/subcontractorAdmin/subcontractorRAP.js'
// 按钮
import ComExaButtons from '@/components/common/exaButtons'
import subcontractorChange from '@/api/OutsourcingartyAdmin/subcontractorAdmin/subcontractorChange.js'
import {
    openAppClient,
    throttle,
    showSuccessPop,
    showLoading,
    hideLoading
} from '@/utils/common'
import AttachComp from '@/components/common/attachIndex'
// 分包商
import { toVoid } from '@/api/OutsourcingartyAdmin/subcontractorAdmin/subcontractor.js'
//审核
import examine from '@/api/OutsourcingartyAdmin/subcontractorAdmin/examine.js'
import ComExaHistory from '@/components/common/exaHistory.vue'
export default {
    components: {
        ComExaHistory,
        AttachComp,
        ComExaButtons
    },
    data () {
        return {
            tabsName: 'baseInfo',
            bucketName: 'OutsourcingartyAdmin', //模块名
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            value: '',
            textarea: '',
            formData: {},
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            //基本信息表单数据
            basicFormData: {
                contractName: '', //合同名称
                outerName: '', //分包商名称
                contractType: '', //合同类型
                creditCode: '', //统一社会信用代码
                outerTypeValue: '', //分包商类型
                businessScopeName: '', //主营范围
                creditLevelValue: '', //历史信用等级
                evaluateResult: '', //当前评价结论
                evaluateDate: '', //评价日期
                evaluateQuarter: '', //评价季度
                evaluateOrg: '', //评价机构
                superiorsOrg: '' //上级机构
            },
            //评价条目
            evaluationItems: {
                checker: '',
                complexEvaluate: '',
                dtlId: '',
                evaluate: '',
                id: '', //关联id
                principal: '',
                scoreResult: '',
                creditRatingTemplateDtls: []
            },
            typeList: [], //类型列表
            auditState: {}, //按钮状态
            winEvent: {}, //保存事件，跳转页面的时候，结束事件，优化性能
            rewardsOrPunishmentList: [] //奖惩类型列表
        }
    },
    computed: {
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 72 - this.lastConHeight
        },
        // 判断状态
        statusLable () {
            return param => {
                const state = this.$store.state.outsourcer.equipData.state
                const obj = state.find(x => x.value == param)
                if (obj !== undefined) {
                    return obj.label
                }
            }
        }
    },
    created () {
        this.billid = this.$route.query.billid
        this.getBasicData() //进入页面就获取基本信息数据
        this.getCreditTemplate()
        this.getCurrentUnitInfo() //获取流程按钮
    },
    mounted () {
        // 获取最后一个内容区域的高度，计算底部空白
        this.getLastConHeight()
        // 保存所有tabName
        const arr = ['baseInfo', 'punishDetail', 'accessory', 'auditHistory']
        let $idsTop = []
        const onScroll = () => {
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            if (this.clickTabFlag) {
                return
            }
            if (!$idsTop[$idsTop.length - 1]) {
                $idsTop = arr.map(item => {
                    const $item = document.getElementById(item)
                    let itemTop = null
                    if ($item) {
                        itemTop = $item.offsetTop
                    }
                    return itemTop
                })
            }
            const scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop
            // 倒序查找
            let curLocal = 0
            for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                let item = $idsTop[i]
                if (scrollTop + 1 >= item) {
                    curLocal = i
                    break
                }
            }
            // 设置对应tabName
            this.tabsName = arr[curLocal]
        }
        this.winEvent.onScroll = onScroll
        window.addEventListener('scroll', this.winEvent.onScroll)
        this.screenWidth =
            document.documentElement.clientWidth - this.topHeight
        this.screenHeight =
            document.documentElement.clientHeight - this.topHeight
        const onResize = () => {
            this.screenWidth = document.documentElement.clientWidth
            this.screenHeight = document.documentElement.clientHeight
            $idsTop = arr.map(item => {
                const itemTop = document.getElementById(item).offsetTop
                return itemTop
            })
        }
        this.winEvent.onResize = throttle(onResize, 500)
        window.addEventListener('resize', this.winEvent.onResize)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.winEvent.onScroll)
        window.removeEventListener('resize', this.winEvent.onResize)
    },
    methods: {
        //获取基本信息数据
        async getBasicData () {
            this.basicFormData = await subcontractorRAP.annualEvaluationGet({
                billId: this.billid
            })
        },
        // 获取季度评价明细
        async getCreditTemplate () {
            let datas = await subcontractorRAP.getannualEvaluationDetailed({
                billId: this.billid
            })
            // 有数据，用后端返回数据
            if (datas.code != 200) {
                this.evaluationItems = datas
            }
        },
        // 获取最后一个内容区域的高度，计算底部空白
        getLastConHeight () {
            let si = setInterval(() => {
                // 因为dom异步加载，通过轮询找到渲染后的dom，获取高度
                if (document.getElementById('evaluateCon')) {
                    const lastConHeight =
                        document.getElementById('evaluateCon').offsetHeight
                    console.log('lastConHeight: ', lastConHeight)
                    this.lastConHeight = lastConHeight
                    console.log('this.lastConHeight', this.lastConHeight)
                    clearInterval(si)
                    si = null
                }
            }, 100)
        },
        //删除
        delData () {
            this.$Ajax
                .httpGet({
                    url: '/outer/evaluate/delete',
                    params: {
                        id: this.id
                    },
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(res => {
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: res.message
                    })
                    this.$router.push('./dynamicEvaluate')
                })
        },

        submit () {},
        handleFullScreen () {
            this.fullscreen = !this.fullscreen
        },
        //取消
        handleClose () {
            this.$router.push('./dynamicEvaluate')
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        onChangeTab (e) {
            console.log('clickTabFlag: ', this.clickTabFlag)
            $.scrollTo(`#${e.name}`, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        },
        // 审核历史列表查询
        async getAuditHistory () {
            let data = await subcontractorChange.findByIdAuditHistory({
                billId: this.billid,
                billType: 6110,
                freeNextUnitIndex: 0,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: ''
            })
            this.tableData = data
        },
        // 作废
        toVoidChange () {
            this.clientPop('info', '是否确认作废', this.callback)
        },
        // 作废确认回调
        async callback () {
            // 客户端弹窗弹出本地页面
            const auditParams = JSON.parse(localStorage.vuex).auditParams
            openAppClient('/nullifyDialog', '单据作废原因', async () => {
                showLoading()
                await toVoid({
                    billId: this.billid, //单据id
                    billType: '6110', //单据类型
                    nullifyCreated: '',
                    nullifyCreator: '',
                    nullifyCreatorId: '',
                    nullifyDescription: auditParams.nullifyDescription,
                    nullifyReason: auditParams.nullifyReason
                }).catch(() => {
                    this.clientPop('suc', '作废失败')
                })
                hideLoading()
            })
        },
        // 撤回
        withdrawChange () {
            this.clientPop('info', '是否确认撤回', this.callbackWithdraw)
        },
        // 撤回确认回调
        async callbackWithdraw () {
            let { code } = await examine.undoAudit({
                billId: this.billid, //单据id
                billType: '6110', //单据类型
                freeNextUnitIndex: 0,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: ''
            })
            if (code == 200) {
                showSuccessPop('撤回成功')
                // 返回列表
                this.handleClose()
            } else {
                showSuccessPop('撤回失败')
            }
        },
        audit () {
            // 客户端弹窗弹出本地页面
            openAppClient('/exaDialog', '填写审核意见', () => {
                // 审核拿到审核弹窗的意见
                const auditParams = JSON.parse(localStorage.vuex).auditParams
                // 将审核意见赋值给参数传给后端
                examine
                    .audit({
                        billId: this.$route.query.billid,
                        billType: 6110,
                        freeNextUnitIndex: 0,
                        freeNextUser: '',
                        isPass: auditParams.isPass,
                        isShareInAudit: true,
                        opinion: auditParams.opinion
                    })
                    .then(() => {
                        this.clientPop('suc', '审核成功')
                        // 返回列表
                        this.handleClose()
                    })
            }, null, null, null, 'small')
        },
        // 获取按钮状态
        getCurrentUnitInfo () {
            examine
                .getCurrentUnitInfo({
                    billId: this.billid,
                    billType: 6110,
                    freeNextUnitIndex: 0,
                    freeNextUser: '',
                    isPass: true,
                    isShareInAudit: true,
                    opinion: ''
                })
                .then(res => {
                    this.auditState = res
                })
        },
        // 按钮组件触发事件
        exas (data) {
            switch (data) {
            case 'audit':
                this.audit() //审核
                break
            case 'undoAudit':
                this.withdrawChange() //撤回
                break
            case 'submitCommit':
                this.submit() //提交
                break
            case 'submit':
                this.save() //保存
                break
            case 'nullify':
                this.toVoidChange() //作废
                break
            case 'deleteData':
                this.ctDelete() //删除
                break
            default:
                break
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}

.e-table {
    background: #fff;
}
// ::v-deep.el-table__body-wrapper::-webkit-scrollbar{
//      width: 6px !important; // 横向滚动条
//     height: 10px !important// 纵向滚动条
// }

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 5px;
}

.el-tab-pane {
    margin-left: -10px;
}
</style>
